<!DOCTYPE html>
<html ng-app="Manifest2EditorApp">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Manifest Version 2 Editor</title>

        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-responsive.min.css">
        <link href="manifest2editor.css" rel="stylesheet" type="text/css">

        <style type='text/css'>
            html, body {
				height: 100%;
            }
			.body-background {
				background-color: #111;
			}
        </style>
    </head>
    <body class="body-background" ng-controller="Manifest2EditorController">
        <div id="header">
            <table style="width:100%">
                <tr>
                    <td>
                         <h4><img src="manifest2editor32.png"></img>  Manifest Version 2 Editor </h4>
                    </td>
                    <td class="text-right">
                        <i id="close-button" class="icon-remove icon-white" ng-click="close()"></i>&nbsp;&nbsp;
                    </td>
                </tr>
            </table>
        </div>
        <div style="height:100%;" class="container-fluid">
            <div style="height:100%;padding-top: 10px;" class="row-fluid">
                <div style="height:100%;" class="span6">
                    <div class="text-right">
                        <button class="btn">
                            <i class="icon-upload"></i> Load...
                        </button>
                        <button class="btn">
                            <i class="i"con-repeat"></i> Reload
                        </button>
                    </div>
                    <br/>
                    <div style="overflow-y: scroll !important;padding-top: 10px;" class="well well-small" id="name-property">
                        <table class="table table-condensed">
                            <tr>
                                <td><span>Name : </span></td>
                                <td>
                                <input spellcheck="false" type="text" ng-model="manifest2.name"/>
                                </input></td>
                            </tr>
                            <tr>
                                <td><span>Version : </span></td>
                                <td>
                                <input spellcheck="false" type="text" ng-model="manifest2.version"/>
                                </input></td>
                            </tr>
                            <tr>
                                <td><label class="checkbox">
                                    <input spellcheck="true" type="checkbox" ng-click="computeHasDescription($event)" ng-model="hasDescription">
                                    </input>&nbsp;Description <a href="https://developer.chrome.com/apps/manifest.html#description" target="manifest_format">?</a> </label></td>
                                <td>
                                <input spellcheck="true" type="text" ng-model="manifest2.description" ng-visible="hasDescription" />
                                </input> </td>
                            </tr>
                            <tr>
                                <td><label class="checkbox">
                                    <input type="checkbox" ng-click="computeHasHomePageUrl($event)" ng-model="hasHomePageUrl">
                                    </input>&nbsp;Home Page Url <a href="https://developer.chrome.com/apps/manifest.html#homepage_url" target="manifest_format">?</a> </label></td>
                                <td>
                                <input spellcheck="false" type="text" ng-model="manifest2.homepage_url" ng-visible="hasHomePageUrl" />
                                </input> </td>
                            </tr>
                            <tr>
                                <td><label class="checkbox">
                                    <input type="checkbox" ng-click="computeHasDefaultLocale($event)" ng-model="hasDefaultLocale">
                                    </input>&nbsp;Default Locale <a href="https://developer.chrome.com/apps/manifest.html#default_locale" target="manifest_format">?</a> </label></td>
                                <td>
                                    <select ng-model="selectedDefaultLocale" ng-visible="hasDefaultLocale" ng-options="default_locale for default_locale in ['en', 'fr']" ng-change="setDefaultLocale()"></select>
                                </td>
                            </tr>
                            <tr>
                                <td><label class="checkbox">
                                    <input type="checkbox" ng-click="computeHasIcons($event)" ng-model="hasIcons">
                                    </input>&nbsp;Icons <a href="https://developer.chrome.com/apps/manifest.html#icons" target="manifest_format">?</a> </label></td>
                                <td>
                                <div ng-show="hasIcons">
                                    <table class="table table-condensed">
                                        <tr ng-repeat='(iconSize, iconUrl) in iconsCopy'>
                                            <td ><span>{{iconSize}}x{{iconSize}} :</span></td>
                                            <td>
                                            <input spellcheck="false" type="text" ng-model="manifest2.icons[iconSize]" />
                                            </td>
                                            <td><i class="icon-remove-sign" ng-click="removeIcon(iconSize)"></i></td>
                                        </tr>
                                    </table><select ng-model="selectedIconSize" ng-options="iconSize for iconSize in ['16', '48', '128']" ></select><i class="icon-plus-sign" ng-click="addIcon(selectedIconSize)"></i></td>
                                </div>
                            </tr>
                            <tr>
                                <td><label class="checkbox">
                                    <input type="checkbox" ng-click="computeHasPermissions($event)" ng-model="hasPermissions">
                                    </input>&nbsp;Permissions <a href="https://developer.chrome.com/apps/declare_permissions.html" target="manifest_format">?</a> </label></td>
                                <td>
                                <div ng-show="hasPermissions">
                                    <table class="table table-condensed">
                                        <tr ng-repeat='permission in manifest2.permissions'>
                                            <td>
                                            {{permission}}
                                            </td>
                                            <td><i class="icon-remove-sign" ng-click="removePermission($index)"></i></td>
                                        </tr>
                                    </table>
                                        <select ng-model="selectedPermission" ng-change="addPermission(selectedPermission)"
ng-options="permission for permission in ['background', 'clipboardRead', 'clipboardWrite', 'webview','contextMenus', 'pointerLock', 'tts', 'filesystem', 'storage', 'unlimitedStorage', 'pointerLock', 'idle', 'filesystem', 'experimental']" >
                                        </select></td>
                                </div>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <a href="https://developer.chrome.com/apps/manifest.html" target="manifest_format">Manifest file format</a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="span6">
                    <div class="text-right">
                        <button class="btn">
                            <i class="icon-download"></i> Save
                        </button>
                        <button class="btn">
                            <i class="icon-download-alt"></i> Save As...
                        </button>
                        <button class="btn">
                            <i class="icon-camera"></i> Copy
                        </button>
                    </div>
                    <br/>
                    <div style="overflow-y: scroll;" class="well well-small" id="#preview">
                        <pre id="#preview">{{manifest2|json}}</pre>
                    </div>
                </div>
            </div>
        </div>
        <script type='text/javascript' src='jquery-1.9.1.min.js'></script>
        <script src="angular-1.1.0.min.js"></script>
        <script src="manifest2editor.js"></script>
    </body>
</html>

